<template>
  <div class="airspaceApplication">
    <div class="container">
      <div class="up-container">
        <el-form :model="queryParams" ref="queryRef" :inline="true">
          <el-form-item label="序列号" prop="aircraftId">
            <el-input
              v-model="queryParams.aircraftId"
              placeholder="请输入序列号"
              maxlength="20"
              clearable
            />
          </el-form-item>
          <el-form-item label="飞手" prop="flyingHand">
            <el-input
              v-model="queryParams.flyingHand"
              placeholder="请输入飞手"
              maxlength="20"
              clearable
            />
          </el-form-item>
          <el-form-item label="报警时间" prop="alartTime">
            <el-date-picker
              style="height: 34px"
              v-model="queryParams.alartTime"
              type="datetimerange"
              start-placeholder="开始时间"
              end-placeholder="结束时间"
              format="YYYY-MM-DD HH:mm"
              @change="getAlartTime"
            />
          </el-form-item>
          <el-form-item label="报警类型" prop="alartType">
            <el-select
              v-model="queryParams.alartType"
              placeholder="请选择报警类型"
              clearable
            >
              <el-option
                v-for="dict in alartTypeList"
                :key="dict.dictValue"
                :label="dict.dictLabel"
                :value="dict.dictValue"
              />
            </el-select>
          </el-form-item>
          <div class="buttonStyle">
            <el-button
              class="searchButton"
              type="primary"
              icon="Search"
              @click="handleQuery"
              >搜索</el-button
            >
            <el-button class="refreshButton" icon="Refresh" @click="resetQuery"
              >重置</el-button
            >
          </div>
          <div>
            <el-button class="createAirspace" icon="Plus" @click="batchDelete"
              >批量删除</el-button
            >
          </div>
        </el-form>
      </div>

      <div class="down-container">
        <el-table
          :data="tableData"
          max-height="62vh"
          :header-cell-style="headClass"
          stripe
          :border="true"
          style="width: 100%"
        >
          <el-table-column type="selection" width="50" align="center" />
          <el-table-column
            label="序号"
            width="85"
            type="index"
            :index="indexMethod"
            align="center"
          />
          <el-table-column
            label="操作"
            align="center"
            class-name="small-padding fixed-width"
          >
            <template #default="scope">
              <el-button
                link
                type="primary"
                @click="handleDetail(scope.row)"
                v-hasPermi="['airspace:airspaceSetup:detail']"
                >详情</el-button
              >
              <el-button
                link
                type="primary"
                @click="handleDelete(scope.row)"
                style="color: red"
                >删除</el-button
              >
            </template>
          </el-table-column>
          <el-table-column
            label="飞行计划编号"
            prop="flyApplyCode"
            align="center"
          >
            <template #default="{ row }">
              <div v-if="row.flyApplyCode">
                {{ row.flyApplyCode }}
              </div>
              <div v-else>-</div>
            </template>
          </el-table-column>
          <el-table-column label="飞手" prop="flyingHand" align="center">
            <template #default="{ row }">
              <div v-if="row.flyingHand">
                {{ row.flyingHand }}
              </div>
              <div v-else>-</div>
            </template>
          </el-table-column>
          <el-table-column label="航空器" prop="aircraftId" align="center">
            <template #default="{ row }">
              <div v-if="row.aircraftId">
                {{ row.aircraftId }}
              </div>
              <div v-else>-</div>
            </template>
          </el-table-column>
          <el-table-column label="任务性质" prop="taskNature" align="center">
            <template #default="{ row }">
              <div v-if="row.taskNature">
                {{ row.taskNature }}
              </div>
              <div v-else>-</div>
            </template>
          </el-table-column>
          <el-table-column label="飞行时间段" align="center" width="300">
            <template #default="{ row }">
              {{ row.startTime }} - {{ row.endTime }}
            </template>
          </el-table-column>
          <el-table-column label="报警类型" prop="alartType" align="center">
            <template #default="{ row }">
              <span>{{ gerAlartTypeLabel(row.alartType) }}</span>
            </template>
          </el-table-column>
          <el-table-column
            label="报警时间"
            prop="alartTime"
            align="center"
            width="140"
          />
          <el-table-column label="状态" align="center">
            <template #default="{ row }">
              <span v-if="row.status === 0">未解除</span>
              <span v-if="row.status === 1">已解除</span>
            </template>
          </el-table-column>
        </el-table>
        <pagination
          v-show="total > 0"
          :total="total"
          v-model:page="queryCurrent.pageNum"
          v-model:limit="queryCurrent.pageSize"
          @pagination="getListFun"
          class="pagination"
        />
      </div>
      <!--  删除  -->
      <el-dialog
        v-model="dialogVisible"
        title=""
        width="26%"
        :show-close="true"
        :close-on-click-modal="false"
        :close-on-press-escape="false"
        center
        top="1vh"
      >
        <img src="@/assets/images/deleteWarning.png" alt="" />
        <template #footer>
          <div class="dialog-footer">
            <div style="margin-bottom: 30px; font-size: 14px; color: #333333">
              <span>确定删除选中的</span>
              <!--            <span style="color: rgba(255, 195, 0, 1)">{{ selectedObj.airspaceName }}</span>-->
              <span>吗？</span>
            </div>
            <el-button @click="dialogVisible = false">{{
              $t("airspaceSetup.cancellation")
            }}</el-button>
            <el-button
              style="background: #2bc17b; color: #ffffff"
              @click="deletevisibleHandle()"
            >
              {{ $t("airspaceSetup.determine") }}
            </el-button>
          </div>
        </template>
      </el-dialog>
    </div>
  </div>
</template>

<script>
export default {
  name: "AlarmMonitor",
};
</script>

<script setup>
import { useRouter } from "vue-router";
import { onMounted, reactive, ref, toRefs } from "vue";
import { dataFormat } from "@/utils/format";
import {
  getConditionsList,
  deleteEventIds,
} from "@/api/alarmMonitor/alarmMonitor";
import { getAirspaceStatus } from "@/api/airSpace/airSpaceSetUp";
import { ElMessage } from "element-plus";
const router = useRouter();
const total = ref(0);
const dialogVisible = ref(false);
const alartTypeList = ref([]);
const data = reactive({
  queryParams: {
    aircraftId: null,
    flyingHand: null,
    alartType: null,
    alartStartTime: null,
    alartEndTime: null,
    alartTime: null,
  },
  tableData: [],
  queryCurrent: {
    pageNum: 1,
    pageSize: 10,
  },
});

const { queryParams, tableData, queryCurrent } = toRefs(data);

function headClass({ row, rowIndex }) {
  // if (rowIndex === 0) {
  //   return {background:'#F4F4F4 !important',color:'#000000',fontSize: '16px', fontWeight: '400'}
  // }
}

function indexMethod(index) {
  // 当前页码
  const currentPage = queryCurrent.value.pageNum;
  // 每页显示的数据条数
  const pageSize = queryCurrent.value.pageSize;
  // 上一页最后一个编号
  const prevLastIndex = (currentPage - 1) * pageSize;
  // 当前行的实际索引
  const truelndex = index + prevLastIndex;
  // 如果当前行的索引大于等于当前页的最大索引，
  // 则使用当前行的实际索引，否则使用当前行的原始索引
  return truelndex >= currentPage * pageSize
    ? truelndex
    : index + prevLastIndex + 1;
}

function getAirspaceStatusList() {
  getAirspaceStatus("alarm_type").then((response) => {
    if (response.code === 200) {
      alartTypeList.value = response.data;
      alartTypeList.value.unshift({
        dictLabel: "全部",
        dictValue: "",
      });
    }
  });
}

function gerAlartTypeLabel(val) {
  let label = null;
  alartTypeList.value.map((item) => {
    if (item.dictValue == val) {
      label = item.dictLabel;
    }
  });
  return label;
}

/**
 * @报警时间处理
 * */
function getAlartTime(val) {
  queryParams.value.alartStartTime = dataFormat(val[0], "YYYY-MM-DD HH:mm:ss");
  queryParams.value.alartEndTime = dataFormat(val[1], "YYYY-MM-DD HH:mm:ss");
}

/**
 * @搜索
 * */
function handleQuery() {
  getListFun();
}

/**
 * @重置
 * */
function resetQuery() {
  queryParams.value = {
    aircraftId: null,
    flyingHand: null,
    alartType: null,
    alartStartTime: null,
    alartEndTime: null,
    alartTime: null,
  };
  getListFun();
}

/**
 * @批量删除
 * */
function batchDelete() {}

/**
 * @详情
 * */
function handleDetail(val) {
  router.push({
    name: "AlarmMonitorDetail",
    query: { eventId: val.eventId, droneUK: val.droneUK },
  });
}

let deleteObj = {};
/**
 * @删除
 * */
function handleDelete(val) {
  deleteObj = val;
  dialogVisible.value = true;
}

/**
 * @确定删除
 * */
function deletevisibleHandle() {
  let obj = [];
  obj.push(deleteObj.eventId);
  deleteEventIds(obj).then((res) => {
    if (res.code === 200) {
      getListFun();
      dialogVisible.value = false;
      ElMessage.success("删除成功！");
    }
  });
}

/**
 * @列表请求
 * */
function getListFun() {
  console.log(queryParams.value);
  getConditionsList(queryParams.value, queryCurrent.value).then((res) => {
    if (res.code === 200) {
      tableData.value = res.rows;
      total.value = res.total;
    }
  });
}

onMounted(() => {
  getListFun();
  getAirspaceStatusList();
});
</script>

<style lang="scss" scoped>
.airspaceApplication {
  width: 100%;
  height: 100%;

  .container {
    position: relative;
    width: calc(100% - 40px);
    height: 92%;
    margin: 0 20px 20px;
    //padding: 30px;
    border-radius: 10px;
    background: white;

    .pagination {
      position: absolute;
      left: 50%;
      bottom: 30px;
      transform: translateX(-50%);
    }
  }

  .up-container {
    //margin: 0 20px;
    //padding: 36px 30px 25px;
    background-color: #ffffff;
    border-radius: 4px;
    padding: 30px 30px 0;
    height: 80px;

    :deep .el-form .el-form-item__label {
      font-weight: 400;
      font-size: 14px;
      color: #666666;
    }

    .searchButton {
      width: 90px;
      height: 34px;
      border-radius: 4px;
      color: #ffffff;
      background-color: #2bc17b;
      font-size: 14px;
    }

    .refreshButton {
      width: 90px;
      height: 34px;
      border-radius: 4px;
      color: #ffffff;
      font-size: 14px;
      background: #ffb700;
    }

    .buttonStyle {
      position: absolute;
      right: 0;
      top: -42px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      width: 200px;
      height: 34px;

      .el-button + .el-button {
        margin-left: 20px;
      }
    }

    .createAirspace {
      position: absolute;
      top: -42px;
      right: 220px;
      width: 120px;
      height: 34px;
      color: #ffffff;
      border-radius: 4px;
      background: #2bc17b;
      border: 1px solid #2bc17b;
      font-size: 14px;
    }

    :deep .el-form--inline .el-form-item {
      display: inline-flex;
      vertical-align: middle;
      margin-right: 40px;
      margin-bottom: 19px;
      align-items: center;
    }

    :deep .el-form-item__content {
      width: 272px;
      height: 36px;
      border-radius: 4px;
      background: rgb(255, 255, 255);
      border: 1px solid rgb(220, 223, 230);
    }

    :deep .el-input__wrapper {
      box-shadow: none;
      height: 34px;
      width: 100% !important;
    }

    :deep .el-input {
      width: 270px;
      height: 34px;
      //border: 1px orangered solid;
    }

    :deep .el-select {
      //border: 1px red solid;
      width: 270px;
      height: 34px;
      //display: flex;
      //align-items: center;
      :deep .el-input {
        height: 34px;
      }
    }
  }

  .down-container {
    margin-top: 20px;
    //margin: 0 20px;
    //background-color: #FFFFFF;
    //border-radius: 4px;
    //height: 73%;

    .tag {
      display: inline-block;
      width: 80px;
      height: 30px;
      line-height: 30px;
      text-align: center;
      border-radius: 15px;
      color: rgba(153, 153, 153, 1);
      border: 1px solid rgba(153, 153, 153, 1);
    }
    .tag.warning {
      color: rgba(255, 149, 18, 1);
      border: 1px solid rgba(255, 149, 18, 1);
    }
    .tag.success {
      color: rgba(43, 193, 123, 1);
      border: 1px solid rgba(43, 193, 123, 1);
    }
  }

  :deep .el-table::before {
    height: 0px;
  }

  :deep .el-table__footer-wrapper,
  .el-table__header-wrapper {
    background-color: #f4f4f4;
    height: 56px;
  }

  :deep .el-table__header {
    height: 100%;
    background-color: #f4f4f4;
  }

  :deep .el-table .el-table__cell {
    text-align: center;
  }

  :deep .el-table__row {
    height: 50px;
  }

  :deep .el-dialog:not(.is-fullscreen) {
    margin-top: 36vh !important;
  }
  :deep .el-dialog__body {
    text-align: center;
    display: flex;
    justify-content: center;
    padding: 0px calc(var(--el-dialog-padding-primary) + 5px) 20px !important;
  }
  :deep .el-dialog__footer {
    padding-top: 0;
  }

  .dialog-footer {
    :deep .el-button:nth-child(1) {
      border-color: #ededed;
    }
    :deep .el-button {
      width: 81px;
      height: 32px;
      font-size: 12px;
    }
  }
}
</style>
